<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>真实调试页面</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/ilovefree-migration.css">
    <link rel="stylesheet" href="assets/css/enhanced-layout.css">
    <link rel="stylesheet" href="assets/css/fontawesome-icons.css">
    <style>
        .debug-container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .debug-section {
            background: rgba(3, 150, 255, 0.1);
            border: 1px solid var(--ilovefree-blue);
            padding: 15px;
            border-radius: var(--radius-md);
            margin: 20px 0;
        }
        .log-output {
            background: #2d3748;
            color: #e2e8f0;
            padding: 15px;
            border-radius: var(--radius-md);
            font-family: monospace;
            font-size: 14px;
            max-height: 300px;
            overflow-y: auto;
            margin: 10px 0;
        }
        .test-button {
            padding: 10px 20px;
            background: var(--ilovefree-blue);
            color: white;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            margin: 5px;
        }
        .nav-card-debug {
            border: 1px solid #ddd;
            margin: 10px 0;
            padding: 15px;
            border-radius: var(--radius-md);
            transition: all 0.3s ease;
        }
        .nav-card-debug.hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="debug-container">
        <h1 style="text-align: center; color: var(--text-primary); margin-bottom: 40px;">
            🔍 真实调试页面
        </h1>

        <?php
        require_once 'config/config.php';
        require_once 'includes/database.php';
        $db = new Database();

        // 获取分类2的数据
        $category = null;
        $categories = $db->getCategories();
        foreach ($categories as $cat) {
            if ($cat['id'] == 2) {
                $category = $cat;
                break;
            }
        }

        $navigations = $db->getNavigations(2);
        $tags = $db->getTags(2);
        ?>

        <div class="debug-section">
            <h3>📊 基础信息</h3>
            <p>分类: <?php echo htmlspecialchars($category['name']); ?> (ID: <?php echo $category['id']; ?>)</p>
            <p>导航总数: <?php echo count($navigations); ?></p>
            <p>标签总数: <?php echo count($tags); ?></p>
        

        <!-- 标签容器 - 完全复制主页面结构 -->
        <div class="category-header">
            <div class="category-title">
                <div class="category-icon">
                <h2 class="category-name"><?php echo htmlspecialchars($category['name']); ?></h2>
            
            <div class="tags-container" id="category-2">
                <!-- 推荐标签 -->
                <button class="tag-btn active" data-tag-id="0" data-tag-filter="推荐" data-category-id="<?php echo $category['id']; ?>" onclick="filterByTag(<?php echo $category['id']; ?>, 0)">
                    推荐
                    <span class="tag-count"><?php echo count($navigations); ?></span>
                </button>

                <?php
                // 过滤掉推荐标签
                $filteredTags = array_filter($tags, function($tag) {
                    return trim($tag['name_cn']) !== '推荐';
                });
                ?>
                <?php foreach ($filteredTags as $tag): ?>
                    <?php
                    // 计算该标签下的导航数量
                    $tagNavCount = 0;
                    foreach ($navigations as $nav) {
                        if (!empty($nav['tag_ids']) && is_array($nav['tag_ids'])) {
                            if (in_array($tag['id'], $nav['tag_ids'])) {
                                $tagNavCount++;
                            }
                        }
                    }
                    ?>
                    <button class="tag-btn" data-tag-id="<?php echo $tag['id']; ?>" data-tag-filter="<?php echo htmlspecialchars($tag['name_cn']); ?>" data-category-id="<?php echo $category['id']; ?>" onclick="filterByTag(<?php echo $category['id']; ?>, <?php echo $tag['id']; ?>)">
                        <?php echo htmlspecialchars($tag['name_cn']); ?>
                        <span class="tag-count"><?php echo $tagNavCount; ?></span>
                    </button>
                <?php endforeach; ?>
            
        

        <div class="debug-section">
            <h3>🧪 测试按钮</h3>
            <button class="test-button" onclick="testManualFilter(0)">测试推荐标签</button>
            <button class="test-button" onclick="testManualFilter(2)">测试综合标签</button>
            <button class="test-button" onclick="testManualFilter(3)">测试风景标签</button>
            <button class="test-button" onclick="testManualFilter(4)">测试人物标签</button>
            <button class="test-button" onclick="showAllCards()">显示所有卡片</button>
            <button class="test-button" onclick="debugSystem()">调试系统状态</button>
        

        <!-- 导航卡片 - 完全复制主页面结构 -->
        <div class="nav-grid" id="nav-grid-2">
            <?php foreach ($navigations as $nav): ?>
                <?php
                // 获取导航的标签ID数组
                $navTagIds = isset($nav['tag_ids']) ? json_encode($nav['tag_ids']) : '[]';

                // 构建data-tag-filters属性
                $tagFilters = [];
                if (!empty($nav['tag_ids']) && is_array($nav['tag_ids'])) {
                    foreach ($nav['tag_ids'] as $tagId) {
                        if (!empty($tags)) {
                            foreach ($tags as $tag) {
                                if ($tag['id'] == $tagId) {
                                    $tagFilters[] = htmlspecialchars($tag['name_cn']);
                                    break;
                                }
                            }
                        }
                    }
                    // 添加"推荐"标签
                    $tagFilters[] = '推荐';
                }
                $tagFiltersString = implode(',', array_unique($tagFilters));
                ?>
                <div class="nav-card nav-card-debug"
                     data-nav-id="<?php echo $nav['id']; ?>"
                     data-category-id="<?php echo $category['id']; ?>"
                     data-tag-ids='<?php echo $navTagIds; ?>'
                     data-tag-filters="<?php echo $tagFiltersString; ?>">
                    <a href="<?php echo htmlspecialchars($nav['url']); ?>"
                       class="nav-link"
                       target="_blank"
                       rel="noopener noreferrer"
                       title="<?php echo htmlspecialchars($nav['description'] ?? $nav['name']); ?>">
                        
                            <?php if ($nav['icon_type'] === 'url'): ?>
                                <img src="<?php echo htmlspecialchars($nav['icon']); ?>"
                                     alt="<?php echo htmlspecialchars($nav['name']); ?>"
                                     loading="lazy"
                                     onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                <i class="fas fa-link fallback-icon"></i>
                            <?php else: ?>
                                <i class="<?php echo htmlspecialchars($nav['icon']); ?>"></i>
                            <?php endif; ?>
                            <h4><?php echo htmlspecialchars($nav['name']); ?></h4>
                            <p><?php echo htmlspecialchars($nav['description']); ?></p>
                        
                    </a>
                
            <?php endforeach; ?>
        

        <div class="debug-section">
            <h3>📝 调试日志</h3>
            <div class="log-output" id="debug-log">
                调试日志将在这里显示...
            
        
    

    <script src="assets/js/php-ilovefree-migration.js"></script>
    <script>
        let debugLogs = [];

        function log(message) {
            console.log(message);
            debugLogs.push(`[${new Date().toLocaleTimeString()}] ${message}`);
            updateLogDisplay();
        }

        function updateLogDisplay() {
            const logDiv = document.getElementById('debug-log');
            if (logDiv) {
                logDiv.innerHTML = debugLogs.slice(-20).join('<br>');
                logDiv.scrollTop = logDiv.scrollHeight;
            }
        }

        function testManualFilter(tagId) {
            log(`🧪 手动测试标签过滤: tagId=${tagId}`);

            // 移除所有active类
            document.querySelectorAll('.tag-btn').forEach(btn => {
                btn.classList.remove('active');
            });

            // 添加active类到点击的按钮
            const activeBtn = document.querySelector(`.tag-btn[data-tag-id="${tagId}"]`);
            if (activeBtn) {
                activeBtn.classList.add('active');
                log(`✅ 激活标签: ${activeBtn.getAttribute('data-tag-filter')}`);
            }

            // 手动过滤卡片
            const cards = document.querySelectorAll('.nav-card-debug');
            let visibleCount = 0;

            cards.forEach(card => {
                const filters = card.getAttribute('data-tag-filters') || '';
                const tags = filters.split(',').map(tag => tag.trim()).filter(tag => tag);

                log(`🔍 检查卡片: ${card.querySelector('h4').textContent}`);
                log(`   - 标签过滤器: "${filters}"`);
                log(`   - 解析后的标签: [${tags.join(', ')}]`);

                const shouldShow = tagId === 0 || tags.includes(getTagFilterName(tagId));

                log(`   - 应该显示: ${shouldShow}`);

                if (shouldShow) {
                    card.classList.remove('hidden');
                    card.style.display = 'block';
                    visibleCount++;
                    log(`   - ✅ 卡片已显示`);
                } else {
                    card.classList.add('hidden');
                    card.style.display = 'none';
                    log(`   - ❌ 卡片已隐藏`);
                }
            });

            log(`🎯 过滤完成，显示 ${visibleCount} 个卡片`);
        }

        function getTagFilterName(tagId) {
            if (tagId === 0) return '推荐';
            const btn = document.querySelector(`.tag-btn[data-tag-id="${tagId}"]`);
            return btn ? btn.getAttribute('data-tag-filter') : '';
        }

        function showAllCards() {
            document.querySelectorAll('.nav-card-debug').forEach(card => {
                card.classList.remove('hidden');
                card.style.display = 'block';
            });
            log('✅ 显示所有卡片');
        }

        function debugSystem() {
            log('=== 系统调试信息 ===');

            // 检查迁移系统
            if (window.phpPickfreeMigration) {
                log('✅ PHP迁移系统已初始化');
                log(`📊 分类数据: ${JSON.stringify(Object.keys(window.phpPickfreeMigration.categories))}`);

                const category2 = window.phpPickfreeMigration.categories['category-2'];
                if (category2) {
                    log(`📊 分类2数据: ${category2.cards.length} 个卡片`);
                    log(`📊 分类2标签统计: ${JSON.stringify(category2.tagCounts)}`);
                } else {
                    log('❌ 分类2数据未找到');
                }
            } else {
                log('❌ PHP迁移系统未初始化');
            }

            // 检查DOM元素
            const cards = document.querySelectorAll('.nav-card-debug');
            log(`📊 DOM中的卡片数量: ${cards.length}`);

            // 检查标签按钮
            const tagButtons = document.querySelectorAll('.tag-btn');
            log(`📊 标签按钮数量: ${tagButtons.length}`);
            tagButtons.forEach(btn => {
                const tagId = btn.getAttribute('data-tag-id');
                const tagFilter = btn.getAttribute('data-tag-filter');
                log(`   - 标签: ID=${tagId}, Filter="${tagFilter}"`);
            });

            // 检查nav-grid
            const navGrid = document.getElementById('nav-grid-2');
            if (navGrid) {
                log(`✅ 找到nav-grid-2: ${navGrid.children.length} 个子元素`);
            } else {
                log('❌ 未找到nav-grid-2');
            }
        }

        // 重写全局filterByTag函数以进行调试
        function filterByTag(categoryId, tagId) {
            log(`🏷️ 全局filterByTag调用: categoryId=${categoryId}, tagId=${tagId}`);

            if (window.phpPickfreeMigration) {
                log('✅ 调用迁移系统');
                try {
                    window.phpPickfreeMigration.filterByTag(`category-${categoryId}`, parseInt(tagId));
                } catch (error) {
                    log(`❌ 迁移系统错误: ${error.message}`);
                }
            } else {
                log('❌ 迁移系统未初始化，使用手动过滤');
                testManualFilter(tagId);
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            log('🎯 调试页面已加载');
            log(`📊 初始卡片数量: ${document.querySelectorAll('.nav-card-debug').length}`);

            // 等待迁移系统初始化
            setTimeout(() => {
                log('📊 检查迁移系统状态...');
                debugSystem();
            }, 2000);
        });
    </script>
</body>
</html>